<template>
    <div class="detailH">
        <van-sticky>
            <!-- 顶部导航栏 -->
            <van-nav-bar title="详情" left-text="返回" left-arrow @click-left="$router.go(-1)">
                <template #right>
                    <van-popover v-model:show="showPopover" placement="bottom-end" theme="dark" :actions="actions"
                        @select="onSelect">
                        <template #reference>
                            <van-button style="background-color:#fff;border: none;"><van-icon name="weapp-nav"
                                    size="20" /></van-button>
                        </template>
                    </van-popover>
                </template>
            </van-nav-bar>
        </van-sticky>
        <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" />

        <!-- 轮播图 -->
        <van-swipe class="my-swipe" :autoplay="1200" indicator-color="white">
            <van-swipe-item v-for="item in detailImgs" @click="showImg">
                <img :src="item" />
            </van-swipe-item>
        </van-swipe>
        <p class="price">￥{{ detailList[0].originprice }}</p>
        <h3><span>自营</span>{{ detailList[0].proname }}</h3>

        <!-- 动作栏 -->
        <van-action-bar>
            <van-action-bar-icon icon="cart-o" text="购物车" :badge="detailList.length" @click="$router.push('/cart')" />
            <van-action-bar-button type="warning" text="加入购物车" @click="addGoods" />
            <van-action-bar-button type="danger" text="立即购买" />
        </van-action-bar>

    </div>
</template>

<script>
import { detailList, addCart } from '../server/details.js'
import { showImagePreview } from 'vant';
export default {
    data() {
        return {
            show: true,
            showPopover: false,
            showShare: false,
            detailList: [],
            detailImgs: [],
            actions: [
                { text: '首页', icon: 'wap-home-o' },
                { text: '购物车', icon: 'shopping-cart-o' },
                { text: '分享', icon: 'share-o' },
            ],
            options: [
                [
                    { name: '微信', icon: 'wechat' },
                    { name: '朋友圈', icon: 'wechat-moments' },
                    { name: '微博', icon: 'weibo' },
                    { name: 'QQ', icon: 'qq' },
                ],
                [
                    { name: '复制链接', icon: 'link' },
                    { name: '分享海报', icon: 'poster' },
                    { name: '二维码', icon: 'qrcode' },
                    { name: '小程序码', icon: 'weapp-qrcode' },
                ],
            ],
            num:1
        }
    },

    created() {
        this.detail()
    },

    methods: {
        // 加入商品到购物车
        addGoods(){
            let userid = localStorage.getItem('userid')
            let proid = localStorage.getItem('proid')
            addCart({
                num: this.num, proid, userid,
            }).then((res) => {
                if(res.code === "200"){
                    this.detail()
                    // console.log(this.detailList.length);
                }
            })
        },

        // 点击选项的时候触发
        onSelect(actions) {
            if (actions.text === '首页') {
                this.$router.push('/home')
            } else if (actions.text === '购物车') {
                this.$router.push('/cart')
            } else if (actions.text === '分享') {
                this.showShare = true
            }
        },

        // 图片预览
        showImg() {
            showImagePreview(this.detailImgs);
        },

        // 请求详情页列表数据
        detail() {
            detailList(this.$route.params.id).then((res) => {
                if (res.code === "200") {
                    // 将商品id存储到本地
                    localStorage.setItem('proid' , res.data.proid)
                    this.detailList = this.detailList.concat(res.data)
                    // console.log(this.detailList);
                    this.detailImgs = this.detailImgs.concat(res.data.img1, res.data.img2, res.data.img3, res.data.img4)
                }
            })
        }
    }
}

</script>
<style scoped>
.detailH {
    height: 1000px;
}

/* 轮播图样式 */
.my-swipe .van-swipe-item {
    height: 485px;
    color: #fff;
    font-size: 20px;
    line-height: 482.39px;
}

.van-popover__wrapper {
    background-color: #fff;
}

.van-swipe img {
    width: 100%;
    height: 100%;
}

.price {
    font-size: 4vw;
    font-weight: 800;
    color: #ee0a24;
    padding-left: 9.255px;
}

h3 {
    font-size: 15px;
    color: #2c3e50;
    font-weight: 800;
    margin-left: 9.255px;
    margin-top: -5px;
}

h3>span {
    font-size: 6px;
    color: #fff;
    background-color: #ee0a24;
    border-radius: 5px;
    padding: 0 4px;
    margin-right: 10px;
}
</style>